<template>
	<view class="index">
		<musicHead title="网易云音乐" :icon="false"></musicHead>	
		<!-- 主体部分 -->
		<view class="container">
			<!-- 默认可以在y轴上面滚动 -->
			<scroll-view scroll-y="true" >
				<!-- 首页的搜索部分 -->
				<view class="index-search">
					<!-- 放大镜 -->
					<svg class="icon" aria-hidden="true">
					    <use xlink:href="#icon-Magnifier"></use>
					</svg>
					<input type="text" placeholder="搜索歌曲">
				</view>
				<!-- 列表 -->
				<view class="index-list">
					<!-- 每一项 -->
					<view class="index-list-item" v-for="item in msg.rankList" :key="item.id" @tap="handleToList(item.listId)">
						<!-- 左边 -->
						<view class="index-list-item-img">
							<image :src="item.coverImgUrl" mode=""></image>
							<text>{{item.updateFrequency}}</text>
						</view>
						<!-- 右边 -->
						<view class="index-list-item-text">
							<view v-for="(tracks , index) in item.tracks" :key="index">
								{{index+1}}.{{tracks.first}}--{{tracks.second}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import musicHead from '../../components/musicHead/musicHead.vue'
	import {rankList} from '../../api/index.js'
	import {reactive ,onMounted } from 'vue'
	// 定义一个空数组接从后台拿的数据
	const msg = reactive({
		rankList:[],
	})
	// 从接口获取数据
	onMounted( async ()=>{
		 await rankList().then((res)=>{
				// console.log(res)
				if (res.length) {
					msg.rankList = res;
				}
			})
			console.log(msg.rankList)
	});
	// 点击进入歌单列表
	const handleToList =(listId)=>{//把排行榜里面的id传到list页面
		uni.navigateTo({
			url: '/pages/list/list?listId='+listId,//需要跳转的页面路径，使用问号进行id的传值，然后再拼接一个要传入的id
		});
	}
</script>

<style scoped>
	.container{
		width: 100%;
	}
	.index-search{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 30rpx 30rpx 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 40rpx;
	}
	.index-search input{
		font-size: 28rpx;
		flex: 1;
	}
	.icon{
		fill: gray;
		margin: 0 26rpx;
	}
	.index-list{
		margin: 0 30rpx;
	}
	.index-list-item{
		display: flex;
		margin-bottom: 34rpx;
	}
	.index-list-item-img{
		position: relative;
		width: 212rpx;
		height: 212rpx;
		border-radius: 30rpx;
		overflow: hidden;
		margin-right: 22rpx;
	}
	.index-list-item-img image{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.index-list-item-img text{
		position: absolute;
		width: 100%;
		left: 12rpx;
		bottom: 16rpx;
		color: white;
		font-size: 20rpx;
	}
	.index-list-item-text{
		width: 400rpx;
		list-style: none;
		font-size: 24rpx;
		line-height: 66rpx;
	}
	.index-list-item-text view{
		/*第一步： 溢出隐藏 */
		overflow: hidden;
		/* 第二步：让文本不会换行， 在同一行继续 */
		white-space: nowrap;
		/* 第三步：用省略号来代表未显示完的文本 */
		text-overflow: ellipsis;
	}
</style>
